<template>
  <div class="org">
    <div class="org-right">
      <el-button v-hasPermi="['app:organization:edit']"  @click="toggle()" color="#663399" type="info">编辑</el-button>
    </div>
    <Vo-Basic :data="chartData" :pan="true" :zoom="true" zoomoutLimit="5" :export-button="false" :draggable="false"
      :toggle-siblings-resp="true" parent-node-symbol="fa-users"></Vo-Basic>

    <el-dialog title="编辑" fullscreen :visible.sync="dialogVisible"  :before-close="handleClose">
     <org v-if="isShow" :orgId="id" :typeID="typeID"></org> 
    </el-dialog>  
 

    <el-dialog title="查看" width="40%" :visible.sync="dialogVisible1">
      <el-card  class="cardItem" >
            <div class="cardMain">
              <el-image
                style="width: 144px; height: 170px"
                :preview-src-list="['https://img0.baidu.com/it/u=1082168431,2567066541&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=575']"
                src="https://img0.baidu.com/it/u=1082168431,2567066541&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=575"
              >
              </el-image>
              <div class="text">
                <p class="name"></p>
                <p>负责人:{{ employeeList.principal }}</p>
                <p>电话:{{ employeeList.phone }}</p>
                <p>描述:{{  employeeList.remark}}</p>
                <!-- <p>入职日期:</p> -->
              </div> 
              <!-- <div class="top_right">
              <el-button plain type="primary" >查看</el-button>
            </div> -->
            </div>

          
            <!-- <div class="btns">
                <el-button plain type="primary" style="width:100px">考试成绩</el-button>
                <el-button plain type="primary">培训</el-button>
                <el-button plain type="success" @click="handleUpdate(item)">修改</el-button>
                <el-button plain type="danger"  @click="handleDelete(item)">删除</el-button>
            </div> -->
          </el-card>
    </el-dialog>



  </div>
</template>
<script>
import "vue-orgchart/dist/style.min.css";
import { VoBasic } from "vue-orgchart";
import { listOrganization,getOrganization } from "@/api/system/organization";
import cache from '@/plugins/cache';
import org from "./organ.vue"
export default {

  data() {
    return {
      id: 0,
      isShow:false,
      chartData: {

        // name: 'JavaScript',
        // children: [
        //     { name: 'Angular' },
        //     {
        //         name: 'React',
        //         children: [{ name: 'Preact' }]
        //     },
        //     {
        //         name: 'Vue',
        //         children: [{ name: 'Moon' }]
        //     }
        // ]
      },
      typeID: null,
      dialogVisible:false,
      dialogVisible1:false,
      employeeList:{}
    };
  },
  components: {
    VoBasic,
    org
  },
  beforeCreate() {},
  mounted() {
    let that = this;
    document.querySelector(".vo-basic").addEventListener("click", function () {
      let node = document
        .querySelector(".vo-basic")
        .querySelector(".focused")
        .querySelector(".title").textContent;
      that.goChildren(node, [that.chartData]);

      
          that.getMan();
    
      // that.$router.push(`/employeeInfo?orgId=${that.id}`);
    });
  },

  created() {

    let obj = cache.session.getJSON('route');
    this.typeID = obj.typeId;
    this.req();
  },
  methods: {

    getMan(){
      getOrganization(this.id).then(res=>{
        this.employeeList =  Object.assign(this.employeeList,res.data);
        this.dialogVisible1 = true;
      })
    },
    handleClose(done) {
       
          this.dialogVisible = false;
        
      },
    goChildren(name, arr) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].name == name) {
          this.id = arr[i].id;
        } else if (arr[i].children) {
          this.goChildren(name, arr[i].children);
        }
      }
    },
    onClick(params) {
      console.log(params.name);
    },
    toggle() {
       this.dialogVisible = true;
       this.isShow = false;
       this.$nextTick(()=>{
        this.isShow = true
       })
    },
    req() {
      let res = listOrganization({ typeID: this.typeID }).then((res) => {

        this.chartData = res.data[0];
      });
    },
  },
};
</script>
<style scoped lang="scss">
.org {
  position: relative;
  height: 100%;

  .org-right {
    position: absolute;

    right: 20px;
    top: 20px;
    z-index: 99;
  }
}

.el-button--info {
 background: linear-gradient(90deg, #1890FF 0%, #69C5FF 100%);
  color: #fff;
}

#chart-container {
  overflow: inherit !important;

  ::v-deep .orgchart .node {
    width: auto;

    .title {
      text-align: center;
      font-size: 20px;
      font-weight: 300;
      height: auto;
      line-height: 30px;
      overflow: inherit;
      text-overflow: clip;
      white-space: pre-line;
      padding: 5px;
      color: #fff;
      border-radius: 4px 4px 0 0;
      background: linear-gradient(90deg, #1890FF 0%, #69C5FF 100%) !important;

      .symbol {
        float: none;
        margin-top: 0;
        margin-right: 10px;
      }
    }
  }
}


.cardItem {
    box-sizing: border-box;
    position: relative;
    height: 240px;
    .cardMain {
        display: flex;
        position: relative;
        .top_right{
          position: absolute;
          right: 10px;
          top: 10px;
        }
        .text {
            margin-left: 20px;
            .name {
                font-size: 20px;
                color: #000;
            }
            p {
                line-height: 16px;
                font-size: 16px;
                color: #687487;
            }
        }
    }
    .btns {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
  }


.oc-export-btn {
  bottom: 88%;
}
</style>
  